<template>
	<view>
		<view style="height: 100rpx;"></view>
		<view class="TabBar flex">
			<view class="TabList" :class="num==index?'active':''" v-for="(item,index) in List" :key="index" @click="Jump(item.url,index)">
					<view class="flex" style="width: 100%;justify-content: center;">
						<image v-if="num==index" :src="item.img1" mode=""></image>
						<image v-else :src="item.img2" mode=""></image>
					</view>
					<view class="BarText">{{item.Name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TabBar',
		props: {
			num: {
				type: [Number],
				default: 0
			}, 
		},
			
		data() {
			return {
				List:[
					{
						Name:"直播",
						img1:"/static/images/TabBar/TVIco1.png",
						img2:"/static/images/TabBar/TvIco2.png",
						url:"/pagesC/pages/taber/index"
					},
					{
						Name:"短视频",
						img1:"/static/images/TabBar/video1.png",
						img2:"/static/images/TabBar/video2.png",
						url:"/pagesC/pages/taber/video"
					},
					{
						Name:"商城",
						img1:"/static/images/home_bottom12.png",
						img2:"/static/images/home_bottom11.png",
						url:"/pages/home/index"
					},
					{
						Name:"附近",
						img1:"/static/images/TabBar/nearby1.png",
						img2:"/static/images/TabBar/nearby2.png",
						url:"/pagesC/pages/taber/nearby"
					},
					{
						Name:"我的",
						img1:"/static/images/TabBar/My1.png",
						img2:"/static/images/TabBar/My2.png",
						url:"/pagesC/pages/taber/My"
					},
					]
			}
		},
		methods: {
			Jump(url,index){
				if(this.num!=index){
					if(index==2){
						uni.switchTab({
							url:url
						})
					}else{
						uni.reLaunch({
							url:url
						})
					}
				}
			}
		}
	}
</script>

<style>
	.active .BarText{
		color: #FF3355;
	}
	.TabList image{
		width: 55rpx;
		height: 55rpx;
	}
	.TabList{
		width: 50%;
	}
	.BarText{
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
	}
	.TabBar{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		z-index: 9999;
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrap{
		flex-wrap: wrap;
	}
</style>
